<template>
  <div class="dianzan-page">
    <h2 class="section-title">我的点赞</h2>
    <p class="section-description">您点赞过的花艺作品和社区内容</p>
    
    <div class="filter-bar">
      <div class="filter-tabs">
        <button 
          v-for="tab in tabs" 
          :key="tab.id"
          class="tab-btn"
          :class="{ 'active': activeTab === tab.id }"
          @click="activeTab = tab.id"
        >
          {{ tab.name }}
        </button>
      </div>
    </div>
    
    <div class="likes-list" v-if="filteredLikes.length > 0">
      <div class="like-card" v-for="item in filteredLikes" :key="item.id">
        <div class="like-content">
          <div class="like-image" :style="{ backgroundColor: item.color }"></div>
          <div class="like-info">
            <div class="like-header">
              <h3 class="like-title">{{ item.title }}</h3>
              <span class="like-date">{{ item.date }}</span>
            </div>
            <p class="like-description">{{ item.description }}</p>
            <div class="like-meta">
              <span class="like-type">{{ item.type }}</span>
              <span class="like-author">作者: {{ item.author }}</span>
            </div>
          </div>
        </div>
        <div class="like-actions">
          <button class="action-btn unlike" @click="unlikeItem(item.id)">
            <span class="action-icon">👎</span>
            <span>取消点赞</span>
          </button>
          <button class="action-btn view">
            <span class="action-icon">👁️</span>
            <span>查看详情</span>
          </button>
          <button class="action-btn share">
            <span class="action-icon">🔗</span>
            <span>分享</span>
          </button>
        </div>
      </div>
    </div>
    
    <div class="empty-state" v-else>
      <div class="empty-icon">👍</div>
      <h3 class="empty-title">暂无点赞</h3>
      <p class="empty-description">您还没有点赞任何内容</p>
      <router-link to="/more/community" class="btn-primary">浏览社区</router-link>
    </div>
    
    <div class="pagination" v-if="filteredLikes.length > 0">
      <button class="page-btn prev">上一页</button>
      <div class="page-numbers">
        <button class="page-number active">1</button>
        <button class="page-number">2</button>
        <button class="page-number">3</button>
      </div>
      <button class="page-btn next">下一页</button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'UserDianZan',
  data() {
    return {
      activeTab: 'all',
      tabs: [
        { id: 'all', name: '全部点赞' },
        { id: 'post', name: '社区帖子' },
        { id: 'product', name: '花艺作品' },
        { id: 'article', name: '花艺教程' }
      ],
      likes: [
        {
          id: 1,
          title: '如何制作永生花花束',
          description: '这篇教程详细介绍了永生花的处理和花束制作技巧，非常实用！',
          date: '2025-03-20',
          type: '花艺教程',
          author: '花艺达人',
          color: '#e1bee7'
        },
        {
          id: 2,
          title: '我的第一次插花尝试',
          description: '分享我第一次参加插花课程的作品，虽然不是很完美，但很有成就感！',
          date: '2025-03-15',
          type: '社区帖子',
          author: '花艺新手',
          color: '#ffcdd2'
        },
        {
          id: 3,
          title: '春季限定樱花主题花束',
          description: '这款樱花主题花束太美了，粉色系搭配得非常和谐，已经下单！',
          date: '2025-03-10',
          type: '花艺作品',
          author: '花漾定制',
          color: '#f8bbd0'
        },
        {
          id: 4,
          title: '花艺师的日常 - 婚礼花艺布置',
          description: '记录了一场婚礼的花艺布置全过程，从设计到现场实施，非常专业！',
          date: '2025-03-05',
          type: '社区帖子',
          author: '专业花艺师',
          color: '#bbdefb'
        },
        {
          id: 5,
          title: '家庭养花小技巧',
          description: '分享了几个实用的家庭养花技巧，解决了我很多困惑！',
          date: '2025-02-28',
          type: '花艺教程',
          author: '绿植爱好者',
          color: '#c8e6c9'
        }
      ]
    };
  },
  computed: {
    filteredLikes() {
      if (this.activeTab === 'all') {
        return this.likes;
      }
      
      const typeMap = {
        'post': '社区帖子',
        'product': '花艺作品',
        'article': '花艺教程'
      };
      
      return this.likes.filter(item => item.type === typeMap[this.activeTab]);
    }
  },
  methods: {
    unlikeItem(id) {
      if (confirm('确定要取消点赞吗？')) {
        this.likes = this.likes.filter(item => item.id !== id);
      }
    }
  }
};
</script>

<style scoped>
.dianzan-page {
  color: #333;
}

.section-title {
  color: #e75480;
  margin-bottom: 0.5rem;
}

.section-description {
  color: #666;
  margin-bottom: 2rem;
}

.filter-bar {
  margin-bottom: 2rem;
}

.filter-tabs {
  display: flex;
  gap: 0.8rem;
  flex-wrap: wrap;
}

.tab-btn {
  padding: 0.6rem 1.2rem;
  background: none;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
  color: #666;
}

.tab-btn:hover {
  border-color: #e75480;
  color: #e75480;
}

.tab-btn.active {
  background-color: #e75480;
  color: white;
  border-color: #e75480;
}

.likes-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.like-card {
  background-color: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.like-content {
  display: flex;
  gap: 1.5rem;
  padding: 1.5rem;
}

.like-content {
  display: flex;
  gap: 1.5rem;
  padding: 1.5rem;
}

.like-image {
  flex-shrink: 0;
  width: 120px;
  height: 120px;
  border-radius: 8px;
}

.like-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.like-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 0.8rem;
}

.like-title {
  font-size: 1.2rem;
  color: #333;
  margin: 0;
}

.like-date {
  font-size: 0.9rem;
  color: #888;
}

.like-description {
  margin-bottom: 1rem;
  color: #666;
  line-height: 1.5;
}

.like-meta {
  display: flex;
  justify-content: space-between;
  font-size: 0.9rem;
  color: #888;
}

.like-type {
  background-color: rgba(231, 84, 128, 0.1);
  color: #e75480;
  padding: 0.2rem 0.6rem;
  border-radius: 20px;
}

.like-actions {
  display: flex;
  border-top: 1px solid #eee;
}

.action-btn {
  flex: 1;
  padding: 1rem;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  color: #666;
  transition: all 0.3s;
}

.action-btn:not(:last-child) {
  border-right: 1px solid #eee;
}

.action-btn:hover {
  background-color: #f9f9f9;
}

.action-btn.unlike:hover {
  color: #e74c3c;
}

.action-btn.view:hover {
  color: #3498db;
}

.action-btn.share:hover {
  color: #2ecc71;
}

.action-icon {
  font-size: 1.2rem;
}

.empty-state {
  text-align: center;
  padding: 4rem 0;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 12px;
}

.empty-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.empty-title {
  font-size: 1.5rem;
  margin-bottom: 1rem;
  color: #333;
}

.empty-description {
  color: #666;
  margin-bottom: 2rem;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

.btn-primary {
  padding: 0.8rem 1.5rem;
  background-color: #e75480;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
  text-decoration: none;
  display: inline-block;
}

.btn-primary:hover {
  background-color: #d64d7b;
}

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 2rem;
}

.page-btn {
  padding: 0.6rem 1.2rem;
  background: none;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
  color: #666;
}

.page-btn:hover {
  border-color: #e75480;
  color: #e75480;
}

.page-btn.prev {
  margin-right: 1rem;
}

.page-btn.next {
  margin-left: 1rem;
}

.page-numbers {
  display: flex;
  align-items: center;
}

.page-number {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid #ddd;
  margin: 0 0.3rem;
  border-radius: 4px;
  cursor: pointer;
  color: #666;
}

.page-number:hover {
  border-color: #e75480;
  color: #e75480;
}

.page-number.active {
  background-color: #e75480;
  color: white;
  border-color: #e75480;
}

@media (max-width: 768px) {
  .like-content {
    flex-direction: column;
    gap: 1rem;
  }
  
  .like-image {
    width: 100%;
    height: 150px;
  }
  
  .like-header {
    flex-direction: column;
    gap: 0.5rem;
  }
  
  .like-meta {
    flex-direction: column;
    gap: 0.5rem;
  }
  
  .action-btn span:not(.action-icon) {
    display: none;
  }
}
</style>